<template>
  <div class="container">
    <div class="record-item flex flex-between pad-15" v-for="(item, index) in listData" :key="index">
      <div class="v-align-c">
        <img v-if="item.memberAvatarUrl" :src="item.memberAvatarUrl" class="record__avatar" alt="">
        <div class="mar-l-15">
          <div class="font-14 font-w">{{item.nickname}}</div>
          <div class="font-12 font-color-6">{{item.createTime}}</div>
        </div>
      </div>
      <div class="v-align-c">
        <div>
          <div class="font-14 color-r"><span v-if="item.amount > 0">+</span>{{item.amount}}</div>
          <div v-if="item.remark" class="font-12 font-color-6">{{ item.remark }}</div>
        </div>
      </div>
    </div>
    <div v-if="listData.length===0 && isInitDone" class="align-c mar-t-30 pad-30">
      <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30"
          :src="fileSpace + '/images/2-0-kong.png'"/>
      <div class="pad-t-20 font-14 font-gray">空空如也</div>
    </div>
  </div>
</template>
<script>
import { pageIncomeExpense } from '@/api/personal'
export default {
  data() {
    return {
      params: {
        memberId: '',
        month: '',
        currentPage: 1,
        size: 10,
        type: ''
      },
      isInitDone: false,
      listData: [],
      pullLoad: {
        loading: false,
        finished: false
      },
      resData: {}
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    this.listData = []
    this.params.currentPage = 1
    this.pageIncomeExpense()
  },
  onReachBottom() {
    if (!this.pullLoad.finished) {
      this.pageIncomeExpense()
    }
  },
  methods: {
    pageIncomeExpense() {
      // 分页数据
      this.isInitDone = false
      this.params.memberId = this.getCustomerId
      pageIncomeExpense(this.params).then(response => {
        if (response.isError) return
        this.resData = response.data
        response.data.page.records.forEach(item => {
          this.listData.push(item)
        })
        if (this.listData.length === 0) {
          this.isInitDone = true
        }
        this.params.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.page.total) {
          this.pullLoad.finished = true
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.record-item{
  background: white;
  position: relative;
  &::after{
    content: "";
    position: absolute;
    width: calc(100% - 30px);
    left: 30px;
    bottom: 0;
    border: .5px solid #f1f1f1;
  }
  &:last-child{
    &::after{
      border: unset;
    }
  }
}
.color-r{
  color: #f14646;
}
.record__avatar{
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
</style>
